import { defineComponent, reactive, onMounted, computed, ref } from "vue";
import { notification, Form } from "ant-design-vue";
import { formLayoutProps } from "@/components/props";
import { useVModel } from "@vueuse/core";

const useForm = Form.useForm;

export default defineComponent({
    props:{
        data:Object,
    },
    emits: ["finish", "close"],
    setup(props:any, { emit }) {
        const data = useVModel(props,"data",emit);
        console.log(data.value);
        const form = {
            modelRef: reactive({
                AppletName: data.value.AppletName,
                PublicName: data.value.PublicName,
                Appid: data.value.Appid,
                AppletId: data.value.AppletId,
                Appsecret: data.value.Appsecret,
                Remarks: data.value.Remarks,
            }),
            rulesRef: reactive({
                AppletName: [
                    {
                        required: true,
                        message: "请输入内容！",
                    },
                ],
                PublicName: [
                    {
                        required: true,
                        message: "请输入内容！",
                    },
                ],
                Appid: [
                    {
                        required: true,
                        message: "请输入内容！",
                    },
                ],
                AppletId: [
                    {
                        required: true,
                        message: "请输入内容！",
                    },
                ],
                Appsecret: [
                    {
                        required: true,
                        message: "请输入内容！",
                    },
                ],
                Remarks: [
                    {
                        required: true,
                        message: "请输入内容！",
                    },
                ],
            }),
            onClose: () => {
                emit("close");
            },
        };

        const { validate, validateInfos } = useForm(form.modelRef, form.rulesRef);

        const onSubmit = (e: any) => {
            e.preventDefault();
            validate()
                .then((res) => {
                    console.log(res);
                    console.log("先调保存的接口");
                    console.log("在把modal框关闭,提示成功");
                    emit("finish");
                    notification["success"]({
                        message: "提示",
                        description: "添加成功！",
                    });
                    console.log("在父组件也调用查询接口刷新页面的元素");
                })
                .catch((err) => {
                    console.log(err);
                    notification["error"]({
                        message: "校验失败!",
                    });
                });
        };


        return () => (
            <a-form
                label-col={formLayoutProps.labelCol}
                wrapper-col={formLayoutProps.wrapperCol}
                {...form.modelRef}
                onSubmit={onSubmit}
            >
                <a-form-item label="小程序名称" {...validateInfos["AppletName"]}>
                    <a-input v-model={[form.modelRef.AppletName, "value"]} allowClear />
                </a-form-item>
                <a-form-item label="公众号名称" {...validateInfos["PublicName"]}>
                    <a-input v-model={[form.modelRef.PublicName, "value"]} allowClear />
                </a-form-item>
                <a-form-item label="Appid" {...validateInfos["Appid"]}>
                    <a-input v-model={[form.modelRef.Appid, "value"]} disabled={true} allowClear />
                </a-form-item>
                <a-form-item label="小程序ID" {...validateInfos["AppletId"]}>
                    <a-input v-model={[form.modelRef.AppletId, "value"]} allowClear />
                </a-form-item>
                <a-form-item label="Appsecret" {...validateInfos["Appsecret"]}>
                    <a-input v-model={[form.modelRef.Appsecret, "value"]} allowClear />
                </a-form-item>
                <a-form-item label="备注" {...validateInfos["Remarks"]}>
                    <a-input v-model={[form.modelRef.Remarks, "value"]} allowClear />
                </a-form-item>
                <a-form-item wrapper-col={formLayoutProps.submitWrapperCol}>
                    <div class="modal_footer">
                        <a-button
                            style={{ display: "inline" }}
                            type="primary"
                            html-type="submit"
                            onClick={onSubmit}
                        >
                            保存
                        </a-button>
                        <a-button
                            style={{ display: "inline", marginLeft: "10px" }}
                            onClick={form.onClose}
                        >
                            关闭
                        </a-button>
                    </div>
                </a-form-item>
            </a-form>

        );
    },
});
